本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

:only-of-type 跟 :only-child 非常相似，但也如同之前的篇章中有講到的，認清 child 與 of-type 差異的人，就能擁有世界輕鬆學會這兩大類型選取器，再次的重複一下， child 主要看的是排列順序，of-type 主要看的是元素類型(分類)，理解這兩者本質上的不同，就能順利掌控這兩大類型的選取器囉。

:on-oy-type 選取器的作用是選取唯一一個該類型的物件，也就是說，一個區塊內有一個 span 跟一個 div 的話，這兩個會同時都被選取到，但如果只有一個 span ，而 div 有兩個的話，這樣就變成只會選取到 span 標籤囉，不多說，我們直接看看下方例子，每個 wrap 區塊內的物件數量都不同， Amos 把區塊內物件的數量都寫在註解中了順便在區塊間加上了分隔線以利大家在視覺上容易區隔。

HTML

<!-- 1 * span -->
<div class="wrap">
	<span>span</span>
</div>
<hr>

<!-- 1 * span | 1 * div-->
<div class="wrap">
	<span>span</span>
	<div>div</div>
</div>
<hr>

<!-- 1 * span | 2 * div -->
<div class="wrap">
	<span>span</span>
	<div>div</div>
	<div>div</div>
</div>
<hr>

<!-- 2 * span | 1 * div -->
<div class="wrap">
	<span>span</span>
	<div>div</div>
	<span>span</span>
</div>
<hr>

<!-- 2 * span | 2 * div -->
<div class="wrap">
	<span>span</span>
	<div>div</div>
	<span>span</span>
	<div>div</div>
</div>

我想做到選取到每個 wrap 內，每個類型的獨子物件，所以我 CSS 寫成下方這樣

.wrap :only-of-type{
	background: red;
}

注意上方的原始碼中 .wrap 右側是有空格的喔，表示是選取到子層物件，千萬別漏掉了。

上面這一段 原始碼可以狠狠的點集這邊觀看 結果，在結果中我們可以看到

• 區塊一 : span 被選到
• 區塊二 : span 與 div 都被選到
• 區塊三 : span 被選到
• 區塊四 : div 被選到
• 區塊五 : 完全沒有被選到的物件

很明顯的，只要是該區塊中唯一一種類型的物件，我們就能利用 :only-of-type 來選到，如果搭配了 [CSS 組合式宣告](CSS 組合式宣告 - 新手開發從這裡開始進步) 的話，我們可以更加明確的選到我們想要選到的物件，例如我想要選取到區塊中唯一個一個 span ，那我就可以寫成 .wrap span:only-of-type，很簡單吧。

以上就是今天的 金魚都能懂的 CSS 選取器 - :only-of-type 類型獨子選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見.......等等! 就這樣結束好像怪怪的? 好像有點空洞啊這文章!

你可能會誤會

實際上很多人在使用 CSS 的時候，多數都會幫網頁元素 ( element ) 添加 class ，所以我們在撰寫選取器的時候，有時候很容易把 class 當成元素 ( element ) 來看，但 :only-of-type 基本上是不認你的 CSS class 的，他只認你的網頁元素 ( Tag )，所以如果有以下這種 HTML 跟 CSS 的話，基本上是選不到任何物件的喔。

<div class="wrap">
	<span class="A">span A</span>
	<div class="B">div B</div>
	<span class="C">span C</span>
	<div class="D">div D</div>
</div>

CSS

.wrap .A:only-of-type{
	background: red;
}

上面雖然你的 HTML 中有四種 class 名稱，且每個名稱都不重複，但是由於你的同類型元素 ( Tag ) 數量都不只一個，所以你的選取器是沒有作用的，但倘若換成以下的 HTML 結構的話，就能選到囉

HTML

<div class="wrap">
	<span class="A">span A</span>
	<div class="A">div B</div>
	<div class="A">div D</div>
</div>

CSS

.wrap .A:only-of-type{
	background: red;
}

上面這段原始碼因為 span 是 wrap 中的唯一一個 span 元素，所以我利用該 span 的 class 名稱來選取依舊還是能選取到 span 物件，且縱使你的 class 名稱是重複很多次的，瀏覽器也不會管你，因為他認的是元素類型而不是 CSS class ，這樣應該很清楚了吧。

那麼...再次的...以上就是今天的 金魚都能懂的 CSS 選取器 - :only-of-type 類型獨子選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見^^

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學